<template>
  <div class="page">
    <div class="content">
      <div style="margin-top: 4rem;text-align: center">
        <van-image
            round
            width="8rem"
            height="8rem"
            :src="logo"
        />
      </div>
      <div style="text-align: center;margin-top: 2rem">
        <h1 style="color: #1F46CB">智慧生活 万物互联</h1>
      </div>
      <div style="text-align: center;color: darkgrey;margin-top: 2rem">
        <h3 style="color: #4D6FE5">军工品质 多重保障</h3>
      </div>
    </div>

    <div style="position: absolute;bottom:4rem;width: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center">
      <div style="display: flex;justify-content: center;align-items: center;font-weight: bolder">
        {{warnMsg}}
      </div>
      {{testUrl}}
<!--      <div style="width: 40%;left: 30%">-->
<!--        <div style="text-align: center;color: darkgrey;margin-bottom: 0.2rem;font-size: 0.5rem">如未自动跳转小程序，请点击下方按钮</div>-->
<!--        <van-button round block type="info" @click="goToMiniSoft" :disabled="!loadOk">-->
<!--          打开小程序-->
<!--        </van-button>-->
<!--      </div>-->
      <div style="color: #4D6FE5;text-align: center" v-if="dev.sn">
        <div style="margin-top: 0.2rem">
          当前模块：{{dev.moudle}}
        </div>
        <div style="margin-top: 0.2rem">
          设备号：{{dev.sn}}
        </div>
      </div>
    </div>
    <a :href="sheme" ref="myLink"></a>
  </div>
</template>

<script>
import Cookie from "@/util/cookie";
import { genQrcode } from '@/api/home';
import logo from "@/static/logo.png"
import {Notify} from "@femessage/vant";
export default {
  name: 'Home',
  data() {
    return {
      logo,
      testUrl:'',
      loadOk:false,
      queryString:'',
      sheme:'',
      clientType:0,
      warnMsg:'',
      dev:{
        sn:'',
        moudle:''
      }
    }
  },
  created() {
    let url = window.location.href
    this.queryString = url.substring(url.indexOf("?") + 1, url.indexOf("#"));
    this.dev = this.getUrlParams(this.queryString);
    this.getClientType()
  },
  mounted() {
    this.initPage()
    // this.goToConsumer()
  },
  methods:{
    // goToConsumer(){
    //   if (this.isWeiXin()) {
    //     console.log('是微信')
    //     let url = "";
    //     let userAgent = navigator.userAgent;
    //     if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
    //       url = sessionStorage.getItem("originUrl");
    //       if(url==null || url=='' ||url==undefined){
    //         url = window.location.href;
    //       }
    //     } else {
    //       url = window.location.href;
    //     }
    //     let tempUrl = url.replace('payment','consumer/#/SingleDevice')
    //     window.location.href =
    //         "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdcde81382900f49&redirect_uri=" +
    //         encodeURIComponent(tempUrl) +
    //         "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    //   }
    // },

    initPage(){
      console.log('read --gencode')
      let url = "";
      let userAgent = navigator.userAgent;
      if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
        url = sessionStorage.getItem("originUrl");
        if(url==null || url=='' ||url==undefined){
          url = window.location.href;
        }
      } else {
        url = window.location.href;
      }
      let tempUrl = ''
      if(this.dev.pid=='1468510476') {
        tempUrl = url.replace('payment','consumer/#/MultipleDevice')
      }else {
        tempUrl = url.replace('payment','consumer/#/SingleDevice')
      }
      this.testUrl = tempUrl;
      if( this.dev.moudle=='BT'){
        if(this.clientType==1){
          //跳转小程序
          genQrcode({param:this.queryString}).then((response) => {
            this.loadOk = true;
            this.sheme = response.data;
            console.log(this.sheme)
            this.$nextTick(()=>{
              this.$refs.myLink.click();
            })
          });
        }else{
          this.warnMsg = '蓝牙设备请使用微信客户端扫码'
          Notify({ type: 'warning', message: '蓝牙设备请使用微信客户端扫码' });
        }
      }else if (this.clientType===1) {
        window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdcde81382900f49&redirect_uri=" +
            encodeURIComponent(tempUrl) +
            "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";

      } else if(this.clientType===2){
        const appId = '2021003156618294';
        const scope = 'auth_user'; // 获取用户信息
        const authUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${appId}&scope=${scope}&redirect_uri=${tempUrl}`;
        window.location.href = authUrl;
      } else{
        this.warnMsg = '请使用微信客户端或者支付宝客户端扫码'
        Notify({ type: 'warning', message: '请使用微信客户端或者支付宝客户端扫码' });
      }
    },
    // goToMiniSoft(){
    //   this.$refs.myLink.click();
    // },
    getUrlParams  (url){
      let params = {}, arr;
      let hash = url.slice(url.indexOf('?')+1).split('&');
      for(let i = 0; i < hash.length; i++) {
        arr = hash[i].split('=');
        params[arr[0]] = arr[1];
      }
      return params;
    },
    getClientType() {
      const ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/micromessenger/i)) {
        this.clientType = 1 // 'WeChat';
      } else if (ua.match(/alipayclient/i)) {
        this.clientType = 2 // return 'Alipay';
      } else {
        this.clientType = 0 // return 'Browser';
      }
    },
  }
};
</script>
<style lang="scss">
.page{
  height: 100vh;
  display: flex;justify-content: center;align-items: center;
  background-color: #4D6FE5;
  .content{
    background-color: white;
    width: 96%;
    height: 94vh;
    border-radius: 8px;
  }
}
</style>
